<template>
	<div class="box box_mm">
		<div class="box_main">
			<div class="search_box">
				<div style="display: flex; height: 100%">
					<div class="search_item">
						<span style="margin-right: 10px;">账号名称</span>
						<el-input v-model="search_name" placeholder="请输入账号名称" style="width: 2rem"
							@keyup.enter="search"></el-input>
					</div>
				</div>
				<div class="search_item">
					<el-button type="primary" class="btn_bgcolor" @click="search">搜索</el-button>
					<el-button type="info" @click="reset">重置</el-button>
					<el-button type="success" @click="addnew">新增</el-button>
				</div>
			</div>
			<div class="box_cont">
				<div class="btn_list">
					<!-- <el-button class="mybtn btn_bgcolor" type="primary" @click="daochu">导出</el-button> -->
				</div>
				<div class="mytabbox" style="
                        height: 81vh;
                        padding-top: 10px;
                        box-sizing: border-box;
                    ">
					<Table :tableheader="tableheader" :tabledata="tabledata" ref="mytable" czwidth="220px">
						<template v-slot:btns="row">
							<el-button @click="detail(row.row)" type="primary" size="small"
								style="margin-right: 0.1rem">
								详情
							</el-button>
							<el-button @click="edit(row.row)" type="success" size="small" style="margin-right: 0.1rem">
								修改
							</el-button>
							<el-button @click="detelerow(row.row)" type="danger" size="small"
								style="margin-right: 0.1rem">
								删除
							</el-button>
						</template>
					</Table>
				</div>
			</div>
		</div>

		<add ref="tcbox"></add>
	</div>
</template>

<script setup>
	import {
		onMounted,
		ref,
		provide
	} from 'vue';
	import Table from '@/components/Table.vue';
	import {
		post
	} from '@/utils/axios';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	import add from './add.vue';

	// 新增弹出----------
	let tcbox = ref(null);

	const addnew = () => {
		tcbox.value.showflag = true;
	};
	// 新增弹出end------------------

	// 详情-----------------------------
	const detail = (row) => {
		post({
			url: '/api/rygl/details',
			data: {
				id: row.id,
			},
		}).then((res) => {
			tcbox.value.showflag = true;
			tcbox.value.isedit = false;
			tcbox.value.title = '人员详情';
			Object.assign(tcbox.value.ruleForm, res.data);
		});
	};
	// 详情end--------------------------

	// 修改-----------------------------
	const edit = (row) => {
		post({
			url: '/api/rygl/details',
			data: {
				id: row.id,
			},
		}).then((res) => {
			tcbox.value.showflag = true;
			tcbox.value.isedit = true;
			tcbox.value.title = '编辑人员';
			Object.assign(tcbox.value.ruleForm, res.data);
		});
	};
	// 修改end--------------------------

	// 冻结----------------
	const dongjie = (row) => {
		let texttip = row.isdel == 1 ? '您确定冻结该人员吗？' : '您确定启用人员吗？';
		ElMessageBox.confirm(texttip, '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(() => {
			post({
				url: '/admin/School/editFacilityStatus',
				data: {
					id: row.id,
					type: 1,
					status: row.isdel == 1 ? 2 : 1,
				},
			}).then((res) => {
				ElMessage.success('操作成功!');
				getdata();
			});
		});
	};
	// 冻结end------------

	// 删除----------------
	const detelerow = (row) => {
		ElMessageBox.confirm('确定删除该人员吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(() => {
			post({
				url: '/api/rygl/del',
				data: {
					ids: row.id,
				},
			}).then((res) => {
				ElMessage.success('删除成功!');
				getdata();
			});
		});
	};
	// 删除end-------------

	// 搜索字段
	let search_name = ref('');
	let search_type = ref(0);
	// 定义表头的数据
	const tableheader = ref([{
			key: 'name',
			name: '昵称',
			width: ''
		},
		{
			key: 'phone',
			name: '登录名',
			width: ''
		},
		{
			key: 'phone',
			name: '状态',
			width: "100",
			type: "tags",
			typedata: [{
					type: "success",
					value: 1,
					label: "正常"
				},
				{
					type: "danger",
					value: 2,
					label: "禁用"
				},
			],
		},
		{
			key: 'phone',
			name: '创建时间',
			width: ''
		}
	]);
	// 定义表格的数据
	let tabledata = ref([]);
	const mytable = ref({
		currentp: 1
	});

	// 在 onMounted 钩子中发送请求
	onMounted(() => {
		console.log(mytable.value?.currentPage);
		getdata();
	});

	const getdata = () => {
		post({
			url: '/api/rygl/index',
			data: {
				device_name: search_name.value, // 搜索名称
				p: mytable.value?.currentPage, // 当前页数
				size: 15, // 每页显示数量
			},
		}).then((res) => {
			mytable.value.total = res.data.count;
			tabledata.value = res.data.list;
		});
	};

	const search = () => {
		mytable.value.currentPage = 1;
		getdata();
	};

	const reset = () => {
		search_name.value = '';
		search_type.value = 0;
		mytable.value.currentPage = 1;
		getdata();
	};

	provide('getdata', getdata);
</script>

<style lang="scss" scoped>
	@import url("../public.scss");
</style>